var vue = new Vue({
    el: '#cqr',
    data: {
        accepter: '',
        message: '',
        target:'public'
    },
    methods: {
        sendMessage: function () {//发送消息到服务器
            var message;
            if(vue.target=='public'){
                message={'state':'sendMessage','sender':userId,'accepter':'公共聊天室','message':vue.message};
            }else{
                message={'state':'sendMessage','sender':userId,'accepter':vue.accepter,'message':vue.message};
            }
            message=JSON.stringify(message);
            websocket.send(message);
            vue.addMessage(vue.message,"right");
            vue.message='';//发送完后清空
        },
        addMessage:function (message,direction) {//添加消息到聊天窗口
            if (direction == 'left') {
                message = "<div class='panel-chat-left'><span>"+message+"</span></div>";
            } else {
                message = "<div class='panel-chat-right'><span>"+message+"</span></div>";
            }
            // console.log($('.panel-body').eq(0));
            if(vue.target=='public'){
                $('.panel-body').eq(1).append(message);
                var scrollTop = $(".panel-body").get(1).scrollHeight;//自动滚动到最底部
                $(".panel-body").eq(1).scrollTop(scrollTop);
            }else{
                $('.panel-body').eq(0).append(message);
                var scrollTop = $(".panel-body").get(0).scrollHeight;//自动滚动到最底部
                $(".panel-body").eq(0).scrollTop(scrollTop);
            }
        },
        addUserToPublic:function (username) {//添加用户到公共列表
            var user="<li class='list-group-item'>"+username+"</li>";
            $('.list-group').append(user);
        },
        openWebSocket:function (userId) {
            websocket.close();
            websocket = new WebSocket("ws://192.168.43.223:8080/websocket/"+userId);
        }
    }
});
websocket = new WebSocket("ws://192.168.43.223:8080/websocket/"+userId);
websocket.onopen = function (ev) {
    console.log("websocket已开启:"+websocket.url);
}
websocket.onmessage=function (ev) {
    console.log("接收到消息："+ev.data);
    console.log(JSON.parse(ev.data));
    var msg=JSON.parse(ev.data);
    if(msg.state=='updateUserList'){
        for(var state in msg){
            if(state!='state'){
                vue.addUserToPublic(msg[state]);
            }
        }
    }else if(msg.state=='userExit'){
        $('.list-group>li').each(function () {
            if($(this).html()==msg.user){
                $(this).remove();
                return;
            }
        })
    }else{
        if(msg.accepter=='公共聊天室'){
            vue.target='public';
        }else{
            vue.target='private';
        }
        vue.addMessage(msg.sender+":"+msg.message,"left");
    }
};
$('.list-group').click(function (ev) {
    // console.log(ev.target);
    // console.log(ev.target.innerText);
    if(ev.target.className=='list-group-item'){
        vue.accepter=ev.target.innerText;
        // console.log($('.panel'));
        if(ev.target.innerText=='公共聊天室'){
            vue.target='public';
            $('.panel').eq(0).addClass('hidden');
            $('.panel').eq(1).removeClass('hidden');
        }else{
            vue.target='private';
            $('.panel').eq(0).removeClass('hidden');
            $('.panel').eq(1).addClass('hidden');
        }
    }
});
$(window).on('keypress', function(e) {
    if (e.key === 'Enter'){
        vue.sendMessage();
    }else{
        $('textarea').focus();
    }
})